<!-- 高级搜索 -->
<template>
  <div class="models">
    <div class="models_cons">
      <ColumnLabel label="高级搜索">
        <SvgIcon @click="back" name="close" width="20px" height="20px" />
      </ColumnLabel>
      <div class="models_form">
        <el-button type="danger" @click="screenAddHandler">
          <SvgIcon name="add_plus" fill="#FFF" width="14px" height="14px" /> &nbsp;添加筛选分类
        </el-button>
        <div class="form_list" v-if="state.dataList.length > 0">
          <div class="form_item" v-for="(item, index) in state.dataList" :key="index">
            <div class="form_item_box">
              <div class="form_item_left">
                <el-select v-model="item.SBMC" :disabled="WarehouseStore.disabled"
                  @change="(value: string) => handleChange(value, index)">
                  <el-option v-for="el in state.typeOpt" :key="el.value" :label="el.name" :value="el.value" />
                </el-select>
              </div>
              <div class="form_item_right">
                <div class="form_item_right_zu" v-for="(elemet, key) in item.childList" :key="key">
                  <div class="zu">
                    <el-dropdown>
                      <span class="el-dropdown-link" style="width: 56px;">
                        {{ elemet.connect }}
                        <el-icon class="el-icon--right">
                          <arrow-down />
                        </el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="handleDropdown(index, key, 'and')">and</el-dropdown-item>
                          <el-dropdown-item @click="handleDropdown(index, key, 'or')">or</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <div class="zu_childList">
                      <ul class="list">
                        <li class="item" v-for="(row, i) in elemet.childList" :key="i">
                          <div class="item_input">
                            <el-select v-model="row.fieldName" placeholder="请选择字段"
                              @change="(value: any) => handleField(index, key, i, value)">
                              <el-option v-for="el in item.opt" :key="el.name" :label="el.nameValue" :value="el.name" />
                            </el-select>
                          </div>
                          <div class="item_input">
                            <el-select v-model="row.sign" placeholder="请选择规则">
                              <el-option v-for="el in row.operatorOpt" :key="el.value" :label="el.name"
                                :value="el.value" />
                            </el-select>
                          </div>
                          <div class="item_input">
                            <el-input v-model="row.value" placeholder="" />
                          </div>
                          <div class="item_input item_iocn">
                            <SvgIcon name="add_plus" width="20px" height="20px" @click='condiAddHandler(index, key)'
                              fill="#FF1040" />
                            <SvgIcon name="rem_plus" width="20px" height="20px" @click='condiDelHandler(index, key, i)'
                              fill="#FF1040" />
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="zu_add">
              <div class="zu_add_l" @click="addConditionGroup(index)">
                <SvgIcon name="add_plus" width="20px" height="20px" fill="#FF1040" />
                添加条件组
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button size="default" @click="back"> 取消 </el-button>
        <el-button type="danger" size="default" @click="submit">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { reactive, onMounted } from 'vue'
import { ElMessage } from "element-plus";
import { findTableListGet } from '@/api/usemap'
import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
const $emit = defineEmits(['enterQuery'])
//  高级搜索数据
const state = reactive<any>({
  type: '',
  dataList: [{
    SBMC: WarehouseStore.type, opt: [],
    childList: [
      {
        connect: 'and',
        childList: [{ fieldName: '', sign: '', value: '', element: '', connect: '' }]
      }
    ]
  }],
  searchOpt: [],
  typeOpt: [
    { name: '变压器', value: '01' },
    { name: '灯', value: '02' },
    { name: '灯杆', value: '03' },
    { name: '灯杆附属物', value: '04' },
    { name: '回路', value: '05' },
    { name: '电缆井', value: '06' },
    { name: '单灯控制器', value: '07' },
    { name: '监控箱', value: '08' },
    { name: '分支箱', value: '09' },
    { name: '集中器', value: '10' },
    { name: '直流柜', value: '11' }
  ],
  operatorOpt: [
    // { name: '且', value: 'and' },
    // { name: '或', value: 'or' },
    { name: '是', value: 'equal' },
    { name: '不是', value: 'notEqual' },
    { name: '区间', value: 'between' },
    // { name: '大于', value: 'ge' },
    // { name: '大于等于', value: 'gte' },
    // { name: '小于等于', value: 'le' },
    // { name: '小于等于', value: 'lte' },
    { name: '属于', value: 'in' },
    { name: '不属于', value: '"notIn' },
    { name: '包含', value: 'like' },
    // { name: '不包合', value: 'notLike' },
    // { name: '左匹配', value: 'leftLike' },
    // { name: '右匹配', value: 'rightLike' }
  ],
  findOpt: []
})
//  添加筛选分类
const screenAddHandler = () => {
  const obj = { fieldName: '', sign: '', value: '', element: '', connect: '', operatorOpt: [] }
  state.dataList.push({
    SBMC: WarehouseStore.disabled ? state.type : '', opt: WarehouseStore.disabled ? state.findOpt : [], childList: [{ connect: 'and', childList: [obj] }]
  })
}
//  添加条件组
const addConditionGroup = (index: number) => {
  state.dataList[index].childList.push({
    connect: 'and',
    childList: [{ fieldName: '', sign: '', value: '', element: '', connect: '', operatorOpt: [] }]
  })
}
//  添加条件
const condiAddHandler = (index: number, key: number) => {
  const obj = { fieldName: '', sign: '', value: '', element: '', connect: '', operatorOpt: [] }
  state.dataList[index].childList[key].childList.push(obj)
}
//  删除条件
const condiDelHandler = (index: number, key: number, i: number) => {
  if (i === 0 && state.dataList[index].childList.length === 1 && state.dataList[index].childList[key].childList.length === 1) {
    state.dataList = state.dataList.filter((_item: any, k: number) => index !== k)
  } else if (i === 0 && state.dataList[index].childList[key].childList.length === 1) {
    state.dataList[index].childList = state.dataList[index].childList.filter((_item: any, k: number) => key !== k)
  } else {
    state.dataList[index].childList[key].childList = state.dataList[index].childList[key].childList.filter((_item: any, k: number) => i !== k)
  }
}
//  选择 and or
const handleDropdown = (index: number, key: number, value: string) => {
  state.dataList[index].childList[key].connect = value
}
//  选择字段
const handleField = (index: number, key: number, i: number, value: string,) => {
  let operatorOpt: any[] = []
  state.dataList[index].opt.forEach((item: any) => {
    if (item.name === value) {
      const obj = state.dataList[index].childList[key].childList[i]
      obj.element = item.element
      obj.connect = state.dataList[index].childList[key].connect
      if (obj.element === 'input') {  //  输入框
        operatorOpt = [
          { name: '是', value: 'equal' },
          { name: '不是', value: 'notEqual' },
          { name: '包含', value: 'like' }
        ]
      } else if (obj.element === 'date') {  //  时间选择框
        operatorOpt = [
          { name: '是', value: 'equal' },
          { name: '区间', value: 'between' },
        ]
      } else if (obj.element === 'select') {  //  下拉框
        operatorOpt = [
          { name: '属于', value: 'in' },
          { name: '不属于', value: '"notIn' }
        ]
      }
      obj.operatorOpt = operatorOpt
    }
  })
}
//  确定
const submit = () => {
  if (state.dataList.length === 0) {
    ElMessage.error('请选择过滤条件')
    return
  }
  const params: any = {
    tableName: WarehouseStore.treeList.map((item: any) => { if (item.nameValue === WarehouseStore.tabType) return item.name }).join(''),
    returnFieldNames: [],
    filters: []
  }
  for (let i = 0; i < state.dataList.length; i++) {
    const item = state.dataList[i];
    for (let j = 0; j < item.childList.length; j++) {
      const row = item.childList[j];
      for (let m = 0; m < row.childList.length; m++) {
        const element = row.childList[m];
        delete element.operatorOpt
        if (!element.fieldName || !element.sign || !element.value) {
          ElMessage.error('请填写完整筛选条件')
          return
        }
      }
      params.filters.push(row)
    }
  }
  if (WarehouseStore.disabled) {  //  列表高级筛选
    //  赋值参数
    WarehouseStore.params = params
    //  切换成自定义接口查询
    WarehouseStore.isQuery = true
    //  隐藏高级查询页面
    SettingStore.advancedSearchShow = false
    //  查询列表
    WarehouseStore.dataListAjax()
  } else {  //  地图高级筛选
    const params: any[] = []
    state.dataList.forEach((item: any) => {
      params.push({
        tableName: WarehouseStore.treeList.map((row: any) => { if (row.id === item.SBMC) return row.name }).join(''),
        returnFieldNames: [],
        filters: item.childList
      })
    })
    WarehouseStore.searchCondition = {};
    WarehouseStore.searchCondition.searchParam = params
    WarehouseStore.countCustomPost({ searchParam: params })
    SettingStore.advancedSearchShow = false

    $emit('enterQuery')
  }
}
//  返回
const back = () => {
  SettingStore.advancedSearchShow = !SettingStore.advancedSearchShow
}

//  查询设备属性
const findTableListGetAjax = async (value: string, index: number) => {
  try {
    const { data } = await findTableListGet(value, WarehouseStore.isEnable)
    state.dataList[index].opt = data
    state.findOpt = data
  } catch (error) {

  }
}
//  根据设备类型查询属性
const handleChange = (value: string, index: number) => {
  findTableListGetAjax(value, index)
}

onMounted(() => {
  state.type = WarehouseStore.type
  if (state.type) {
    findTableListGetAjax(state.type, 0)
  }
})

</script>

<style scoped lang="scss">
.models {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.5);
  z-index: 99;

  .models_cons {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1000px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;

    .models_form {
      min-height: 100px;
      padding: 16px;
      border-top: 1px solid #E8E8E9;

      .form_list {
        margin-top: 16px;
        border: 1px solid #EAEEF6;
        max-height: 500px;
        overflow: auto;

        &::-webkit-scrollbar-thumb {
          background-color: #FF0F40;
        }

        &::-webkit-scrollbar-track {
          background-color: #F2F2F2;
        }

        .form_item {

          border-bottom: 1px solid #EAEEF6;

          &:last-child {
            border-bottom: none;
          }

          .form_item_box {
            display: flex;
            align-items: center;

            .form_item_left {
              padding: 16px;
            }

            .form_item_right {
              padding: 16px;

              .form_item_right_zu {
                padding: 16px 0;
                border-bottom: 1px solid #EAEEF6;

                &:first-child {
                  padding-top: 0;
                }

                &:last-child {
                  margin-bottom: 0;
                  border-bottom: none;
                  padding-bottom: 0;
                }

                .zu {
                  display: flex;
                  align-items: center;

                  .el-dropdown-link {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                  }

                  .zu_childList {
                    .list {
                      .item {
                        display: flex;
                        margin-bottom: 16px;

                        &:last-child {
                          margin-bottom: 0;
                        }

                        .item_input {
                          margin-right: 15px;

                          &:last-child {
                            margin-right: 0;
                          }
                        }

                        .item_iocn {
                          display: flex;
                          align-items: center;

                          svg {
                            margin-left: 4px;
                            cursor: pointer;
                          }
                        }
                      }
                    }
                  }

                }
              }

            }
          }

          .zu_add {
            display: flex;
            margin-bottom: 16px;
            margin-left: 230px;

            .zu_add_l {
              display: flex;
              align-items: center;
              cursor: pointer;

              svg {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }

    .footer {
      text-align: right;
      padding: 16px 20px;
      border-top: 1px solid #E8E8E9;
    }
  }
}
</style>